<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="divport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css">
		<link rel="stylesheet" href="/statics/wxdemo/css/chatpage.css">
		<script src="/statics/wxdemo/js/flexble.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/sdk/webimSDK3.1.2.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/js/WebIMConfig.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/js/webconn.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/utils/dialog.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/js/localstorage.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/utils/getMsgData.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/utils/msgtype.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/utils/login.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/utils/record_status.js"></script>
		<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/sdk/pili-rtc-web.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/sdk/vconsole.min.js"></script>
	</head>
	<body>
		<div class="chatPageBox" id="bigbox">
			<!-- <div>
				
				</div> -->
				
				
						
				
			<!-- </div> -->
			<div class="fixedtop">
				<div class="getBack">
					<van-button class="arrowbox" type="default" @click="back">
						<img src="/statics/wxdemo/img/back.png">
					</van-button>
					<p>{{sendConfig.name}}</p>
					<!-- <van-button class="dingdan" type="default" @click="gourl('friendSet.html')">
										<img class="oicon1" src="/statics/wxdemo/img/oicon1.png">
									</van-button> -->
				</div>
			</div>
			<div scroll-y="true" class="wrap" upper-threshold='-50'>
				<div class="message" v-for="(item,index) in txtlist" :key="item">
					<!-- <div :class="item.self?'self':'main'"> -->
					<div v-if="item.self == 'self' || item.self == 'main'" :class="item.self == 'self' ? 'self' : 'main'">
						<div class="user">
							<span v-if="item.self == 'main'" class="user-text">{{item.from}}</span>
							<span v-if="item.self == 'self'" class="user-text">{{name}}</span>
						</div>
						<img class="avatar" src="/statics/wxdemo/img/avatar.jpg" />
						<div class="msg">
							<img v-if="item.self == 'main'" src="/statics/wxdemo/img/popleftarrow@2x.png" class="msg_popleftarrow" />
							<img v-if="item.self == 'self'" src="/statics/wxdemo/img/poprightarrow@2x.png" class="msg_poprightarrow" />
							<span v-if="item.type == 'txt' || item.type == 'emoji'" class="msginnerbox" v-for="(valitem,valindex) in item.value"
							 :key="valindex">
								<span v-if="valitem.type == 'txt'">{{valitem.data}}</span>
								<img v-if="valitem.type == 'emoji'" class="emojiitem2" :src="emojiList.path+valitem.data"></img>
							</span>
			
							<img v-if="item.type == 'img'" class="imgitem" :src="item.value" mode="aspectFill" @click="preimg(item)">
							<!-- <audio-msg
												v-if="item.type == 'audio'"
												:msg="item"></audio-msg> -->
							<div v-if="item.type == 'audio' && item.self == 'self'" class="audio-player" :style="{opacity: opcity}" @click="play">
								<span class="time">语音''</span>
								<div class="controls play-btn">
									<img v-if="item.self == 'main'" src="/statics/wxdemo/img/voicemsg.png" class="images" />
									<img v-if="item.self == 'self'" src="/statics/wxdemo/img/voicemsgmy.png" class="images" />
								</div>
							</div>
							<div v-if="item.type == 'audio' && item.self == 'main'" class="audio-player" :style="{opacity: opcity}" @click="play">
								<div class="controls play-btn">
									<img v-if="item.self == 'main'" src="/statics/wxdemo/img/voicemsg.png" class="images" />
									<img v-if="item.self == 'self'" src="/statics/wxdemo/img/voicemsgmy.png" class="images" />
								</div>
								<span class="time">''语音</span>
							</div>
						</div>
					</div>
					<!-- <div v-if="item.self == 'websocmes' && item.websocmes" class="outlinemesbox">
											<p>{{item.value[0].data}}2</p>
										</div>
										
										<div v-if="item.self == 'other' && item.isvideo && videochatting" class="videochatbox" @click="joinvideo">
											<p>{{item.value[0].data}}3</p>
										</div> -->
					<div v-if="item.self == 'websocmes' && item.websocmes" class="outlinemesbox" v-for="(item,index) in txtlist" :key="item">
						<p>{{item.value[0].data}}2</p>
					</div>
				</div>
			
			</div>
			<div class="room_bar">
			<!-- <div> -->
				<!-- <div v-if="item.self == 'websocmes' && item.websocmes" class="outlinemesbox" v-for="(item,index) in txtlist" :key="item">
					<p>{{item.value[0].data}}2</p>
				</div> -->
				<div v-if="item.self == 'other' && item.isvideo && videochatting" class="videochatbox" @click="joinvideo" v-for="(item,index) in txtlist" :key="item">
					<p>{{item.value[0].data}}3</p>
				</div>
			<!-- </div> -->
			<div class="text-input">
				<textarea
					class="f news"
					type="text"
					v-model="value"
					cursor-spacing="65"
					confirm-type="send"
					placeholder-style="color:#CFCFCF; padding-left:5px;"
				>
					
				</textarea> 
				<div :class="[{nosendbtn:!cansend},'sendbtn']" @click="sendtext">发送</div>
			</div>
			<div class="menuList">
				<div class="menuinner">
					<img class="Emoji" src="/statics/wxdemo/img/emoji.png" @click="showemoji = true">
					<div class="picbtnbox">
						<img class="picbtn" src="/statics/wxdemo/img/picb.png">
						<input type="file" id="fileinp" value=""  @change="sendimg" accept="image/*"/>
					</div>
					<!-- <img class="camerabtn" src="/statics/wxdemo/img/xji.png"> -->
					<img class="camerabtn" src="/statics/wxdemo/img/file.png">
					<img class="audiobtn" src="/statics/wxdemo/img/audiop.png" @click="openrecordbox">
					<img class="spbtn" src="/statics/wxdemo/img/sp.png" @click="createsp">
					<!-- <p @click="record">录制</p> -->
					<!-- <p @click="play">播放</p> -->
				</div>
			</div>
			<scroll-div v-if="showemoji" :class="[{scrollup:showemoji,scrolldown:!showemoji},'scrolldiv']" scroll-y="true">
				<div class="emojibox">
					<img 
					class="emojiitem" 
					:src="emojiList.path+emojitem"  
					v-for="(emojitem,index) in emojiList.map"
					:key="index"
					@click="tapemoji(emojitem)"
					>
					<div class="emojidel">
						<img src="/statics/wxdemo/img/faces/btn_del.png">
					</div>
				</div>
			</scroll-div>	
		</div>
		<div v-if="showrecordpop" class="modal modal-record">
			<div class="recordcover" @click="hiderecordbox"></div>
			<div class="modal-body">
				<div class="sound-waves">
					<div v-for="(item,index) in radomheight" :key="index" :style="{height:item+'rem',marginTop:-item/2+'rem'}"></div>
					<div style='clear:both;width:0;height:0;'></div>
				</div>
				<span class="desc">{{recordtext}}</span>
				<div class="dot" @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend">
				</div>
				<div class="nocopybox"></div>
			</div>
		</div>
			
			<div v-if="openvideo" :class="[{localtracks_class_small:issmall},'localtracks_class']">
				<img class="suofang" src="/statics/wxdemo/img/suofang.png" @click="issmall = !issmall">
				<div v-if="!issmall" class="viddeobtnBox">
					<!-- <img v-if="isopenaudio" class="micphone" src="/statics/wxdemo/img/micphone.png"  @click="pauseaudio"> -->
					<!-- <img v-if="!isopenaudio" class="micphone" src="/statics/wxdemo/img/micphoneno.png"  @click="pauseaudio"> -->
					<img class="changbtn" src="/statics/wxdemo/img/changbtn.png">
					<img class="closevideo" src="/statics/wxdemo/img/closevideo.png" @click="leavevideo">
					<img v-if="isopenvideo" class="spvideo" src="/statics/wxdemo/img/spvideo.png" @click="pausevideo">
					<img v-if="!isopenvideo" class="spvideo" src="/statics/wxdemo/img/spvideono.png" @click="pausevideo" style="width: 7.9%;">
				</div>
				<div id="localtracks"></div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	//录音=》停止，获取localId =》上传微信服务器获得serverId=》下载地址到环信服务器=》播放
WebIM.message = WebIM.default.message;
const InitHeight1 = [.8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8, .8];
const InitHeight2 = [.7, .1,1.1, .1, .5, .2, 1, .4, .5, .6, .1, .2, .55, .7, .2, .6, .3, .5, .6, .4, .5, 1];
var webvue = new Vue({
	el: '#bigbox',
	data() {
		return {
			value:'',
			cansend:false,
			showemoji:false,
			emojiList:getemoji(),//表情数据
			txtlist:getDialog(),//对话数据
			// txtlist:[
			// 	{
			// 		from: "jgqpc1",
			// 		self: 'other',
			// 		to: "jgqpc2",
			// 		isvideo:true,
			// 		value:[{data:'视频中'}]
			// 	},
			// 	{
			// 		from: "jgqpc1",
			// 		self: 'self',
			// 		to: "jgqpc2",
			// 		// isvideo:true,
			// 		value:[{data:'咖喱鸡'}]
			// 	}
			// ],
			sendConfig:'',//对方好友或群的id，名字
			isgroup:false,//是否是群
			type:'',//
			name:'',//自己的id
			showrecordpop:false,
			// recordStatus:RecordStatus_().HIDE, 
			// RecordStatus:RecordStatus_(),
			// RecordDesc:RecordDesc_(),		// 模板中有引用
			radomheight: InitHeight1,
			wxconfig:'',
			isstart:false,
			localId:'',
			serverId:'',
			Loop:'',
			recordtext:'按住 说话',
			iscancel:false,
			randomtime:'',
			RunAnimation:false,
			opcity: 1,
			inter:'',//点击语音透明
			isovertime:false,//录音超时
			isone:true,
			videochatting:true,
			
			session:'',
			publishedVideoTracks:'',//当前人的video的trackinfo，视频
			publishedAudioTracks:'',//当前人的video的trackinfo，音频
			openvideo:false,//视频整个大div
			isopenvideo:true,//是否开启自己的视频
			isopenaudio:true,//是否开启静音
			loadings:'',//加载中的节点
			issmall:'',//是否缩小视频
			localTracks:'',
			token1:'___SoX0HXLKGjl3spqi9yPejZ0O-hgVXv7yn6Gl_:UUnHNuQEe4H4drS_by4ifgN49co=:eyJhcHBJZCI6ImYyZ2xmMHd1ZiIsInJvb21OYW1lIjoidGVzdDEiLCJ1c2VySWQiOiJmaXNobGEiLCJleHBpcmVBdCI6MTU5NzMwOTI3MywicGVybWlzc2lvbiI6InVzZXIifQ==',
			token2:'___SoX0HXLKGjl3spqi9yPejZ0O-hgVXv7yn6Gl_:FNwLmF09he-9PNzJJq28CBMX5_Y=:eyJhcHBJZCI6ImYyZ2xmMHd1ZiIsInJvb21OYW1lIjoidGVzdDEiLCJ1c2VySWQiOiJmaXNoaHUiLCJleHBpcmVBdCI6MTU5NzMwOTI3MywicGVybWlzc2lvbiI6InVzZXIifQ==',
		
		}
	},
	mounted(){
		// console.log(this.RecordStatus.SHOW)
		isfirst = 3;
		relogin()
		this.name = getStorage('myid');
		if(getStorage('pagedata')){
			this.sendConfig = getStorage('pagedata');
			console.log(this.sendConfig)
			saveStorage('pagedata','')
		}
		if(getStorage('chatype')){
			this.isgroup = true;
			console.log(this.type)
			removeStorage('chatype')
		}else{
			this.isgroup = false;
		}
		this.ajfunc()
		// wx.onVoiceRecordEnd({
		// // 录音时间超过一分钟没有停止的时候会执行 complete 回调
		//   complete: function (res) {
		// 	  vant.Toast('已经1分钟')
		//   var localId = res.localId;
		// }
		// });
	},
	watch:{
		value:{
			handler(){
				if(this.value){
					this.cansend = true;
				}else{
					this.cansend = false;
				}
			}
		}
	},
	methods:{
		ajfunc(){
			var that = this;		
			wx.config({
			  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			  appId: '<?= $signPackage["appId"];?>', // 必填，公众号的唯一标识
			  timestamp: <?= $signPackage["timestamp"];?>, // 必填，生成签名的时间戳
			  nonceStr: '<?= $signPackage["nonceStr"];?>', // 必填，生成签名的随机串
			  signature: '<?= $signPackage["signature"];?>',// 必填，签名
			  jsApiList: ['startRecord','stopRecord','onVoiceRecordEnd','playVoice','pauseVoice','stopVoice','onVoicePlayEnd','uploadVoice','downloadVoice'] // 必填，需要使用的JS接口列表
			});
				
		},
		resetscroll(){
			var clientHeight =  document.body.clientHeight;
			var topHeight = $('.fixedtop').outerHeight(true);
			var room_barHeight = $('.room_bar').outerHeight(true);
			var height = clientHeight - topHeight - room_barHeight - 20;
			$(".wrap").css({'height':height+'px'});
		},
		back(){
			window.location.href = '/Welcome/chatlist';
		},
		gourl(url){
			window.location.href = url;
		},
		scrolllistbox(){
			console.log('滚动')
			var clientHeight =  document.body.clientHeight;
			var topHeight = $('.fixedtop').outerHeight(true);
			var room_barHeight = $('.room_bar').outerHeight(true);
			var height = clientHeight - topHeight - room_barHeight - 20;
			$(".wrap").css({'height':height+'px'});
			console.log($(".wrap").height())
			$(".wrap").animate({scrollTop:$(".wrap").prop("scrollHeight")})
		},
		sendtext(){
			// return
			var that = this;
			if(this.value != ''){
				this.sendmsgfunc(this.value);
				this.value = '';
			}	
		},
		sendmsgfunc(datav,videomes){
			var that = this;
			var ext = {};
			if(this.isgroup){
				sendID = this.groupid
				ext = {
					groupname:this.sendConfig.name
				}
			}else{
				sendID = this.sendID
			}
			if(videomes == 'isvideo'){
				//发起视频会议
				var ext = {
					other:'videocall',
					// confrId:that.confrId,
					// password:that.password
				}
			}else if(videomes == 'websocmes'){
				//退出视频会议
				var ext = {
					other:'websocmes',
					// confrId:that.confrId,
					// password:that.password
				}
			}else if(videomes == 'issharescream'){
				//发起共享桌面
				var ext = {
					other:'issharescream',
					confrId:that.confrId,
					password:that.password
				}
			}else if(videomes == 'closevideochatting'){
				var ext = {
					other:'closevideochatting',
				}
			}else{
				var ext = {
					other:''
				}
			}
			var id = conn.getUniqueId();                 // 生成本地消息id
			var msg = new WebIM.message('txt', id);      // 创建文本消息
			var option = {
				msg: datav,                  // 消息内容
				from:that.name,
				to: that.sendConfig.sendID,                          // 接收消息对象（用户id）
				roomType: false,
				ext: ext,                                  //扩展消息
				success: function (id, serverMsgId) {
					console.log('send private text Success');  
				},                                       // 对成功的相关定义，sdk会将消息id登记到日志进行备份处理
				fail: function(e){
					console.log("Send private text error");  
				}                                        // 对失败的相关定义，sdk会将消息id登记到日志进行备份处理
			};
			msg.set(option);
			console.log(this.type)
			if(this.isgroup){
				console.log("群群群2")
				msg.setGroup('groupchat');
			}
			if(videomes == 'isvideo'){
				this.videochatting = true;
				var msgData = {
					self:'other',
					type:msgtype().TEXT,
					value:datav,
					from:msg.body.from,
					to:msg.body.to,
					isvideo:true,
				}
			}else if(videomes == 'websocmes'){
				var msgData = {
					self:'websocmes',
					type:msgtype().TEXT,
					value:datav,
					from:msg.body.from,
					to:msg.body.to,
					websocmes:true
				}
			}else if(videomes == 'issharescream'){
				var msgData = {
					self:'other',
					type:msgtype().TEXT,
					value:datav,
					from:msg.body.from,
					to:msg.body.to,
					issharescream:true
				}
			}else if(videomes == 'closevideochatting'){
				var msgData = {
					self:'closevideochatting',
					type:msgtype().TEXT,
					value:datav,
					from:msg.body.from,
					to:msg.body.to,
					issharescream:true
				}
			}else{
				var msgData = {
					self:'self',
					type:msgtype().TEXT,
					value:datav,
					from:msg.body.from,
					to:msg.body.to
				}
			}
			// let msgData = {
			// 	self:'self',
			// 	type:msgtype().TEXT,
			// 	value:datav,
			// 	from:msg.body.from,
			// 	to:msg.body.to
			// }
			if(videomes != 'closevideochatting'){
				pushDialog(getMsgData(msgData,msgtype().TEXT))
			}
			// pushDialog(getMsgData(msgData,msgtype().TEXT))
			// this.value = '';
			console.log('咖喱鸡')
			console.log(msg.body)
			conn.send(msg.body);
			setTimeout(()=>{
				this.scrolllistbox()
			},300)
		},
		sendimg(){
			console.log('发图了')
			var that = this;
			var id = conn.getUniqueId();                   // 生成本地消息id
			var msg = new WebIM.default.message('img', id);        // 创建图片消息
			var input = document.getElementById('fileinp');  // 选择图片的input
			var file = WebIM.default.utils.getFileUrl(input);      // 将图片转化为二进制文件
			var sendID,ext = {};
			if(this.isgroup){
				sendID = this.groupid
				ext = {
					groupname:this.sendConfig.name
				}
			}else{
				sendID = this.sendID
			}
			var allowType = {
			    'jpg': true,
			    'gif': true,
			    'png': true,
			    'bmp': true
			};
			if (file.filetype.toLowerCase() in allowType) {
			    var option = {
			        apiUrl: WebIM.config.apiURL,
			        file: file,
			        from:that.name,
			        to: that.sendConfig.sendID, 
			        ext: ext,           // 接收消息对象
			        roomType: false,
			        chatType: 'singleChat',
			        onFileUploadError: function () {      // 消息上传失败
			            console.log('onFileUploadError');
			        },
			        onFileUploadComplete: function () {   // 消息上传成功
			            console.log('onFileUploadComplete');
			        },
			        success: function () {                // 消息发送成功
			            console.log('Success');
			        },
			        flashUpload: WebIM.flashUpload
			    };
			    msg.set(option);
				if(this.isgroup){
					console.log("群群群2")
					msg.setGroup('groupchat');
				}
			    conn.send(msg.body);
				let msgData = {
					self:'self',
					type:msgtype().IMAGE,
					value:msg.value.url,
					valuearr:[msg.value.url],
					from:msg.body.from,
					to:msg.body.to
				}
				pushDialog(msgData)
				console.log(getDialog())
				console.log(msg)
				this.scrolllistbox()
			}
		},
		preimg(item){
			console.log(item)
			vant.ImagePreview({
			  images: [item.value],
			  showIndex:false
			});
		},
		tapemoji(emoji){
			let emojival;
			for(var key in this.emojiList.map){
				if(this.emojiList.map[key] == emoji){
					emojival = key
				}
				// console.log(key); 
			}
			if(this.value){
				this.value = this.value+emojival
			}else{
				this.value = emojival
			}
		},
		openrecordbox(){
			this.showrecordpop = true;
		},
		hiderecordbox(){
			this.showrecordpop = false;
			this.recordtext = '长按 说话';
			this.iscancel = true;
		},
		record(){
			var that = this;
			if(this.isstart){
				this.isstart = false;
				wx.stopRecord({
				  success: function (res) {
					  console.log('停止了')
					wx.uploadVoice({
					  localId: res.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
					  isShowProgressTips: 1, // 默认为1，显示进度提示
					  success: function (res) {
					    var serverId = res.serverId; // 返回音频的服务器端ID
						that.serverId = serverId;
						console.log(serverId)
					  }
					});
				  }
				});
			}else{
				this.isstart = true;
				wx.startRecord();
			}
		},
		play(){
			var that = this;
			if(that.serverId){
				clearInterval(this.inter)
				this.inter = setInterval(() => {
					let opcity = this.opcity;
					this.opcity = opcity == 1 ? 0.4 : 1
				}, 500)
				wx.downloadVoice({
				  serverId: that.serverId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
				  isShowProgressTips: 1, // 默认为1，显示进度提示
				  success: function (res) {
				    var localId = res.localId; // 返回音频的本地ID
					wx.playVoice({
					  localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
					});
				  }
				});
				wx.onVoicePlayEnd({
				  success: function (res) {
					  clearInterval(that.inter)
					  that.opcity = 1;
				    var localId = res.localId; // 返回音频的本地ID
				  }
				});
			}else{
				vant.Toast('没有录音')
			}	
		},
		myradom(){
			if(this.isone){
				this.radomheight = InitHeight1;
				this.isone = false;
			}else{
				this.radomheight = InitHeight2;
				this.isone = true;
			}
		},
		gotouchstart(e){
		   var that=this;
		   this.changedTouches = e.touches[0]
		   this.randomtime = setInterval(()=>{
			   that.myradom()
		   },500)
		   this.Loop = setTimeout(function() {
			   that.RunAnimation = true;
			 that.Loop = 0;
			 //执行长按要执行的内容
			 console.log('start')
			 wx.startRecord();
			 that.recordtext = '松开 发送';
			 that.iscancel = false;		 
		   }, 1000);
			wx.onVoiceRecordEnd({
			// 录音时间超过一分钟没有停止的时候会执行 complete 回调
				complete: function (res) {
					vant.Toast('说话时间过长');
					wx.uploadVoice({
						localId: res.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
						isShowProgressTips: 1, // 默认为1，显示进度提示
						success: function (res) {
							var serverId = res.serverId; // 返回音频的服务器端ID
							that.serverId = serverId;	
							that.sendaudio(serverId)
						}
					});
					that.recordtext = '长按 说话';
					that.isovertime = true;
					that.showrecordpop = false;
				}
			})
		 },
		 over(){
			 vant.Toast('过长over')

		 },
		      //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
		gotouchend(){
			var that=this;
			clearInterval(this.randomtime)
			this.radomheight = InitHeight1;
		    if(!this.isovertime){
				clearTimeout(that.Loop);
				console.log('end'+that.Loop)
				  if(that.Loop == 0){
					  if(!that.iscancel){
						//这里写长按完之后的事件
						wx.stopRecord({
							success: function (res) {
								console.log('结果：')
								console.log(res)
								wx.uploadVoice({
									localId: res.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
									isShowProgressTips: 1, // 默认为1，显示进度提示
									success: function (res) {
										var serverId = res.serverId; // 返回音频的服务器端ID
										that.serverId = serverId;
										that.sendaudio(serverId)
									}
								});
							}
						});
					  }else{
						  wx.stopRecord({
						    success: function (res) {
						      var localId = res.localId;
						    }
						  });
						  that.serverId = '';
					  }
				   that.showrecordpop = false;
				   that.recordtext = '长按 说话';
				   that.iscancel = false;
				   that.RunAnimation = false;
				 }else{
					 //这里写点击完之后的事件
					 vant.Toast('说话时间太短')
					 that.recordtext = '长按 说话';
					 that.iscancel = false;
					 that.RunAnimation = false;
				 }
			}else{
				
			}
		},
		//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
		gotouchmove(e){
			var that=this;
			var touches = e.touches[0];
			console.log('move'+that.Loop)
		     clearTimeout(that.Loop);//清除定时器
			 // this.RunAnimation = true;
			 if(this.changedTouches.pageY - touches.pageY > 50){
				that.recordtext = '松开 取消';
				that.iscancel = true;
			 }
			 if((this.changedTouches.pageY - touches.pageY < 50) || (this.changedTouches.pageY == touches.pageY)){
				that.recordtext = '松开 发送';
				that.iscancel = false;
			 }
		},
		sendaudio(urldata){
			var that = this;
			var ext = {};
			if(this.isgroup){
				sendID = this.groupid
				ext = {
					groupname:this.sendConfig.name
				}
			}else{
				sendID = this.sendID
			}
			var id = conn.getUniqueId();                 // 生成本地消息id
			var msg = new WebIM.message('custom', id);   // 创建自定义消息
			var customEvent = "customEvent";             // 创建自定义事件
			var customExts = {
				type:'audio',
				url:urldata,
			};                         // 消息内容，key/value 需要 string 类型
			msg.set({
				from:that.name,
				to: that.sendConfig.sendID,                          // 接收消息对象（用户id）
				customEvent,
				customExts,
				ext:{},                                  // 消息扩展
				roomType: false,
				success: function (id, serverMsgId) {},
				fail: function(e){}
			});
			console.log(this.type)
			if(this.isgroup){
				console.log("群群群2")
				msg.setGroup('groupchat');
			}
			let msgData = {
				self:'self',
				type:msgtype().AUDIO,
				value:this.value,
				from:msg.body.from,
				to:msg.body.to
			}
			pushDialog(msgData)
			this.value = '';
			console.log('对话')
			console.log(getDialog())
			console.log(msg)
			conn.send(msg.body);
			setTimeout(()=>{
				this.scrolllistbox()
			},300)
		},
		async createsp(){
			// this.openvideo = true;
			// return
			 if(this.openscreen){
			 	vant.Toast('您正在共享桌面，无法使用视频');
			 	return
			 }else{
			 	if(!this.openvideo){
			 		this.openvideo = true;
			 		this.loadings = vant.Toast.loading({
											  forbidClick: true,
											  message: '视频加载中...',
											})
			 		// 初始化一个房间 Session 对象, 这里使用 Track 模式
			 		const myRoom = new QNRTC.TrackModeSession();
			 		// 这里替换成刚刚生成的 RoomToken
			 		await myRoom.joinRoomWithToken(this.token1);
			 		console.log("joinRoom success1!");
			 		// this.sendmsgfunc('视频会议中，点击进入','isvideo')
			 		await this.publish(myRoom,true,true,false);
			 		this.autoSubscribe(myRoom);
			 	}else{
			 		vant.Toast('您已开启视频')
			 	}	
			 }
		},
		async publish(myRoom,isaudio,isvideo,isscreen) {
			var that = this;
			this.localTracks = await QNRTC.deviceManager.getLocalTracks({
		    audio:  { enabled: isaudio, tag: "audio" },
		    video:  { enabled: isvideo, tag: "video" },
		    screen: { enabled: isscreen, tag: "screen" },
		  });
		  // if(isvideo){
			  setTimeout(()=>{
			  	console.log("my local tracks",this.localTracks);
			  	console.log("localTracks[1].info",this.localTracks[1].info)
			  	that.publishedVideoTracks = this.localTracks[1].info;
			  	that.publishedAudioTracks = this.localTracks[0].info;
			  },2000)
		  // }
		  // if(isscreen){
			 //  setTimeout(()=>{
			 //  	console.log("my local tracks",this.localTracks);
			 //  },2000)
		  // }
		  // 将刚刚的 Track 列表发布到房间中
		  await myRoom.publish(this.localTracks);
		  this.session = myRoom;
		  console.log("publish success!");
		  if(isvideo){
			  // 在这里添加
			  // 获取页面上的一个元素作为播放画面的父元素
			  var localElement = document.getElementById("localtracks");
		  }
		  if(isscreen){
			  // 在这里添加
			  // 获取页面上的一个元素作为播放画面的父元素
			  var localElement = document.getElementById("screnbox");
		  }
		  // 遍历本地采集的 Track 对象
		  for (const localTrack of this.localTracks) {
		    // 如果这是麦克风采集的音频 Track，我们就不播放它。
		    if (localTrack.info.tag === "audio") continue;
		    // 调用 Track 对象的 play 方法在这个元素下播放视频轨
		    localTrack.play(localElement, true);
			console.log('localTrack:',localTrack)
		  }
		  if(isscreen){
			this.issharepeo = true;
		  }
		},
		
		//成员加入视频会议
		async joinvideo(){
			this.openvideo = true;
			// 初始化一个房间 Session 对象, 这里使用 Track 模式
			const myRoom = new QNRTC.TrackModeSession();
			// 这里替换成刚刚生成的 RoomToken
			await myRoom.joinRoomWithToken(this.token2);
			console.log("joinRoom success2!");
			await this.publish(myRoom,true,true,false);
			this.autoSubscribe(myRoom);
		},
		async subscribe(myRoom, trackInfoList) {
			// 这里的参数 myRoom 是指刚刚加入房间时初始化的 Session 对象, 同上
			// trackInfoList 是一个 trackInfo 的列表，订阅支持多个 track 同时订阅。
		  // 通过传入 trackId 调用订阅方法发起订阅，成功会返回相应的 Track 对象，也就是远端的 Track 列表了
		  const remoteTracks = await myRoom.subscribe(trackInfoList.map(info => info.trackId));
		
		  // 选择页面上的一个元素作为父元素，播放远端的音视频轨
		  if(this.openvideo){
			  var remoteElement = document.getElementById("localtracks");
		  }else if(this.openscreen){
			  var remoteElement = document.getElementById("screnbox");
		  }
		  // 遍历返回的远端 Track，调用 play 方法完成在页面上的播放
		  for (const remoteTrack of remoteTracks) {
		    remoteTrack.play(remoteElement);
		  }
		},
		autoSubscribe(myRoom,type) {
			var that = this;
			// 这里的参数 myRoom 是指刚刚加入房间时初始化的 Session 对象, 同上
		  const trackInfoList = myRoom.trackInfoList;
		  console.log("room current trackInfo list", trackInfoList)
		
		  // 调用我们刚刚编写的 subscribe 方法
		  // 注意这里我们没有使用 async/await，而是使用了 Promise，大家可以思考一下为什么
		  that.subscribe(myRoom, trackInfoList)
		    .then(() => console.log("subscribe success!"))
		    .catch(e => console.error("subscribe error", e));
		
		  // 添加事件监听，当房间中出现新的 Track 时就会触发，参数是 trackInfo 列表
		  myRoom.on("track-add", (trackInfoList) => {
		    console.log("get track-add event!", trackInfoList);
		    that.subscribe(myRoom, trackInfoList)
		      .then(() => console.log("subscribe success!"))
		      .catch(e => console.error("subscribe error", e));
		  });
		  if(type == 'iswatchingpeo'){
			  //共享观看方
			  this.issharepeo = false;
		  }
		  this.loadings.close()
		  
		  // 就是这样，就像监听 DOM 事件一样通过 on 方法监听相应的事件并给出处理函数即可
		},
		pauseaudio(){
			if(this.isopenaudio){
				var tracks = [
					{
						trackId:this.publishedAudioTracks.trackId,
						muted:true
					}
				];
				this.isopenaudio = false;
			}else{
				var tracks = [
					{
						trackId:this.publishedAudioTracks.trackId,
						muted:false
					}
				];
				this.isopenaudio = true;
			}
			this.session.muteTracks(tracks);
		},
		pausevideo(){
			var that = this;
			if(that.isopenvideo){
				var tracks = [
					{
						trackId:this.publishedVideoTracks.trackId,
						muted:true
					}
				];
				that.isopenvideo = false
			}else{
				var tracks = [
					{
						trackId:this.publishedVideoTracks.trackId,
						muted:false
					}
				];
				that.isopenvideo = true
			}
			this.session.muteTracks(tracks);
		},
		leavevideo(){
			this.session.leaveRoom()
			this.publishedAudioTracks = '';
			this.openvideo = false;
			this.videochatting = false;
			this.sendmsgfunc(this.name+'已退出视频会议','websocmes')
		},
		joinvideo(){
			
		},
		
	}
})
window.addEventListener('focusout', function() {
    window.scrollTo(0, 0)
 })

$(document).ready(function(){
	// 初始化vConsole
	// window.vConsole = new window.VConsole({
	//   defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
	//   maxLogNumber: 1000,
	//   // disableLogScrolling: true,
	//   onReady: function() {
	//     console.log('vConsole is ready.');
	//   },
	//   onClearLog: function() {
	//     console.log('on clearLog');
	//   }
	// });
	
	$("textarea").focus(function(){
		console.log('focus')
		setTimeout(()=>{
			console.log('呱呱')
			webvue.scrolllistbox()
		},300)
	});
	$("textarea").blur(function(){
		console.log('blur')
		setTimeout(()=>{
			console.log('呱呱')
			webvue.scrolllistbox()
		},300)
	});
});
</script>